
<template>
  <div class="box">
    <div id="menu">
      <div class="sidebar">
        <h2>菜单</h2>
        <ul>
          <li><router-link to="/index">首页</router-link></li>
          <li><router-link to="/home">图书管理</router-link></li>
          <li><router-link to="/set">设置</router-link></li>
        </ul>
      </div>
      <div class="content">
        <router-view name="sidebar"></router-view>
        <router-view></router-view>
      </div>
    </div>
  <div class="show">
        <div class="top">
            <input type="text" name="" id="" placeholder="请输入要查询内容" class="str" v-model="keyWord">
            <input type="button" value="查询" @click="search()">
            <router-link to="/add"><input type="button" value="新键"></router-link>
        </div>
        <div class="content">
            <table class="tb">
                <tr>
                    <th>Id</th>
                    <th>标题</th>
                    <th>作者</th>
                    <th>类别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in blogs" :key="item.id" v-show="!item.hide">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.flag}}</td>
                    <td>
                      <router-link :to="{ name: 'Edit', params: { id: item.id } }">
                        <input type="button" value="编辑" class="edit">
                    </router-link>
                        <input type="button" value="删除" class="delete" @click="del(item.id)">
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>
<script setup>
  import { reactive,ref,onMounted,computed } from 'vue';
  import axios from 'axios';
  const keyWord = ref('');
  const blogs = reactive([]);
  const blog = reactive({
    id: 0,
    title: '',
    author: '',
    flag: ''
  });
  onMounted(async()=>{
    let res = await axios.get('http://localhost:3000/blog');
    let blogData = res.data;
    blogData.data.forEach( item => {
      blogs.push(item);
    })
  });
  const editLink = computed((id)=>{
     return{name:'Edit',params:{id:id}}
  }) 
  // 编辑
  function edit(id){
      let tmpblog = blogs.filter((item) => {
        return item.id === id;
      })[0];
      blog.id = tmpblog.id;
      blog.title = tmpblog.title;
      blog.author = tmpblog.author;
      blog.flag = tmpblog.flag;
  }
  
  async function del(id){
    if(confirm('是否删除？')){
      let res = await axios.delete(`http://localhost:3000/blog/${id}`);
      if(res.data.code === 1000){
        const index = blogs.findIndex(item => item.id === id); // 查找要删除元素的索引
        if (index !== -1) { // 确保找到了要删除的元素
          blogs.splice(index, 1); // 使用splice删除元素
        }
      }
    }
  }
  async function search() {
    const keyword = keyWord.value.trim();
    const res = await axios.get(`http://localhost:3000/blog?keyword=${keyword}`);
    if (res.data.code === 1000) {
      const searchData = res.data.data;
      blogs.forEach(item => {
        item.hide = true; // 先隐藏所有条目
        searchData.forEach(searchItem => {
          if (item.id === searchItem.id) {
            item.hide = false; // 显示匹配到的条目
          }
        });
      });
    }
  }
</script>
<style scoped>
  .box{
    display: flex;
  }
  .show{
    width: 700px;
    height:600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
  }
  .top{
    height: 45px;
    width: 360px;
    display: flex;
    align-items: center;
  }
  .top input[type=button]{
    height: 26px;
    margin-left: 5px;
  }
  .str{
    height: 20px;
    width: 200px;
  }
  .content{
    background-color: white;
    width: 100%;
  }
  table{
    border-collapse: collapse;
    width: 100%;
  }
  .tb th,.tb tr,.tb td{
    border-bottom: 1px solid gray;
    text-align: center;
    height: 30px;
  }
  th{
    background-color: black;
    color: white;
    font-size: 18px;
  }
  .edit,.delete{
      background-color: cornflowerblue;
      border: 1px solid black;
      height: 26px;
      color: white;
      border-radius: 5px;
  }
  .delete{
      background-color: lightcoral;
      margin-left: 5px;
  }
  .modal-bg{
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.644);
    position: fixed;
    top: 0px;
    left: 0px;
  }
  .modal{
      display: flex;
      flex-direction: column;
      width: 300px;
      height: 180px;
      background-color: white;
      margin: 50px auto;
      display: flex;
      align-items: center;
      border-radius: 15px;
      box-shadow: 2px 2px 2px 2px rgba(176, 159, 226, 0.61);
  }
  .modal .editTB{
      width:280px;
      margin-top:10px;
      height:150px;
  }
  #menu{
    width: 140px;
    height: 100vh;
    background-color: rgb(0, 0, 0);
  }
  .sidebar {
     float: left;
     width: 85%;
   }
   .sidebar li{
    list-style: none;
    text-align: start;
    height: 35px;
    color: white;
    width: 100%;
    line-height: 35px;
   }
   .sidebar li a{
    color: white;
   }
   .sidebar li:hover{
    background-color: rgba(245, 245, 220, 0.413);
   }
   .sidebar ul{
    padding: 0px;
    margin-left: 20px;
    width: 100%;
   }
  .content {
   float: left;
   width: 80%;
  }
  h2{
    color: white;
  }
</style>